$(document).ready(function() {
    //用户只需要在这里设置展示图片的宽度,高度,切换时间即可！
    var imgWidth = 350;
    var imgHeight = 100;
    var imgTime = 4000;

    //获取li图的个数
    var liCount = $("#imgGo ul li").length;
    var index = 1;
    
    //更具用户设置的宽度和高度应用到代码里
    $("#imgGo").attr("style","width:"+imgWidth+"px; height:"+imgHeight+"px;");
    $("#imgGo ul").attr("style","width:"+imgWidth*liCount+"px; height:"+imgHeight+"px;");
    $("#imgGo ul li").attr("style","width:"+imgWidth+"px; height:"+imgHeight+"px;");
    for (var i=0; i<liCount; i++) {
        $("#imgIndex").append("<span></span>");
    }
    $("#imgIndex span").eq(index-1).animate({"opacity":"1"});
    
    //向左移动图片
    function moveUl() {
        if(index < liCount) {
            var leftValue = -index*imgWidth;
            $("#imgGo ul").animate({left:leftValue});
            $("#imgIndex span").animate({"opacity":"0.4"},100);
            $("#imgIndex span").eq(index).animate({"opacity":"1"});
        } else{
            moveUlBack();
            index = 0;
        }
        index++;
    }

    //图片返回原位
    function moveUlBack() {
        $("#imgGo ul").animate({left:"0"});
        $("#imgIndex span").animate({"opacity":"0.4"},100);
        $("#imgIndex span").eq(0).animate({"opacity":"1"});
    }

    //鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
    $("#imgGo").hover(function() {
        clearInterval(cycle);
    },function() {
        cycle = setInterval(function() {moveUl()},imgTime);
    });

    //为小按钮添加鼠标滑入事件，以显示相应的内容
    $("#imgIndex span").hover(function() {
        index = $("#imgIndex span").index(this);
        moveUl();
    },function() {
    });

    //固定时间调用图片移动函数
    var cycle = setInterval(function() {moveUl()},imgTime);
});
